<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table 标签</title>
</head>
<body>
<table border="1px" bgcolor="#00ff7f">
    <thead>
    <tr>
         <p>table 表格</p>
        <h4>没有 cellpadding属性</h4>
        <th>第一列,</th>
        <th>第二列,</th>
        <th>第三列,</th>
        <th>第四列.</th>
    </tr>
    </thead>
        <tbody>
            <tr>
            <td>第一行第一列,</td>
            <td>第一行第二列,</td>
            <td>第一行第三列,</td>
            <td>第一行第四列.</td>
            </tr>
            <tr>
            <td>第二行第一列,</td>
            <td>第二行第二列,</td>
            <td>第二行第三列,</td>
            <td>第二行第四列.</td>
            </tr>
            <tr>
            <td>第三行第一列,</td>
            <td>第三行第二列,</td>
            <td>第三行第三列,</td>
            <td>第三行第四列.</td>
            </tr>
            <tr>
            <td>第四行第一列,</td>
            <td>第四行第二列,</td>
            <td>第四行第三列,</td>
            <td>第四行第四列.</td>
            </tr>
            <tr>
            <td>第五行第一列,</td>
            <td>第五行第一列,</td>
            <td>第五行第一列,</td>
            <td>第五行第一列.</td>
            </tr>
        </tbody>
    </table>

    <table border="1px" background="50.jpg" cellpadding="30">
        <p>table单元格的合并</p>
        <h4>有 cellpadding属性</h4>

        <caption>单元格标题</caption>
        <thead>
            <tr>
                <th>第一行第一列,</th>
                <th>第一行第二列,</th>
                <th colspan="2">第一行第三列,</th>
                <!--<td>第一行第四列.</td>-->
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>第一行第一列,</td>
                <td>第一行第二列,</td>
                <td>第一行第三列,</td>
                <td>第一行第四列.</td>
            </tr>
            <tr>
                <td rowspan="2">第二行第一列
                    <ul>
                        <li type="disc">香蕉</li>
                        <li type="circle">苹果</li>
                        <li type="square">橘子</li>
                        <li>葡萄</li>
                    </ul>
                </td>
                <td>第二行第二列,
                    <table border="1px" bgcolor="#1e90ff" cellpadding="5">
                        <tr>
                            <td>A</td>
                            <td>B</td>
                        </tr>
                        <tr>
                            <td>C</td>
                            <td>D</td>
                        </tr>
                    </table>
                </td>
                <td rowspan="2" colspan="2">第二行第三列,
                    <table border="1px" bgcolor="#98fb98" cellspacing="10">
                            <tr>
                                <td>AA</td>
                                <td>BB</td>
                            </tr>
                            <tr>
                                <td>CC</td>
                                <td>DD</td>
                            </tr>
                            <tr>
                                <td>EE</td>
                                <td>FF</td>
                            </tr>
                        </table>
                </td>
                <!--<td>第二行第四列.</td>-->
            </tr>
            <tr>
                <!--<td>第三行第一列,</td>-->
                <td>第三行第二列,</td>
                <!--<td>第三行第三列,</td>-->
                <!--<td>第三行第四列.</td>-->
            </tr>
        </tbody>

    </table>
        <p>属性frame="box":</p>
        <table frame="box">
          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
        </table>

        <p>属性frame="above":</p>
        <table frame="above">
          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
        </table>

        <p>属性 frame="below":</p>
        <table frame="below">
          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
        </table>

        <p>属性 frame="hsides":</p>
        <table frame="hsides">
          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
        </table>

        <p>属性frame="vsides":</p>
        <table frame="vsides">
          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
        </table>
    </table>


</body>
</html>